<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
      <el-form-item label="部门名称" prop="deptName">
        <el-input
            v-model="queryParams.deptName"
            placeholder="请输入部门名称"
            clearable
            style="width: 200px"
            @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-select v-model="queryParams.status" placeholder="部门状态" clearable style="width: 200px">
          <el-option
              v-for="dict in sys_normal_disable"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
            type="primary"
            plain
            icon="Plus"
            @click="handleAdd"
            v-hasPermi="['system:dept:add']"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
            type="success"
            plain
            icon="CopyDocument"
            @click="handleAddPeer(null)"
            v-hasPermi="['system:dept:add']"
        >添加同级组织</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
            type="info"
            plain
            icon="Sort"
            @click="toggleExpandAll"
        >{{ isExpandAll ? '全部收起' : '全部展开' }}</el-button>
      </el-col>
      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <!-- 重新设计的组织架构图 -->
    <div class="org-chart-horizontal" v-loading="loading">
      <div v-if="!loading && deptList.length > 0" class="org-container">
        <!-- 公司节点 -->
        <div class="company-level" v-if="rootDept">
          <div class="company-node" @click="handleNodeClick(rootDept)">
            <div class="node-glow"></div>
            <div class="node-icon company-icon">
              <i class="el-icon-office-building"></i>
              <div class="icon-shine"></div>
            </div>
            <div class="node-content">
              <div class="node-title">{{ rootDept.deptName }}</div>
              <div class="node-type">公司</div>
              <div class="node-info">
                <span><i class="el-icon-sort"></i> 排序: {{ rootDept.orderNum }}</span>
                <span v-if="rootDept.leader"><i class="el-icon-user"></i> 负责人: {{ rootDept.leader }}</span>
              </div>
            </div>
            <div class="node-badge">
              <el-tag :type="rootDept.status === '0' ? 'success' : 'danger'" size="small" effect="dark">
                {{ getStatusText(rootDept.status) }}
              </el-tag>
            </div>
            <div class="node-actions">
              <el-button link type="primary" icon="Edit" @click.stop="handleUpdate(rootDept)" v-hasPermi="['system:dept:edit']"></el-button>
              <el-button link type="primary" icon="Plus" @click.stop="handleAdd(rootDept)" v-hasPermi="['system:dept:add']"></el-button>
              <el-button link type="primary" icon="CopyDocument" @click.stop="handleAddPeer(rootDept)" v-hasPermi="['system:dept:add']"></el-button>
              <el-button
                  v-if="rootDept.children && rootDept.children.length > 0"
                  link
                  type="primary"
                  :icon="rootDept.expanded ? 'ArrowDown' : 'ArrowRight'"
                  @click.stop="toggleDept(rootDept)"
                  class="expand-btn"
              ></el-button>
            </div>
          </div>

          <!-- 一级部门 - 横向排列 -->
          <div class="dept-level level-1" v-if="rootDept.expanded && rootDept.children && rootDept.children.length > 0">
            <div
                v-for="dept in rootDept.children"
                :key="dept.deptId"
                class="dept-container"
            >
              <div class="dept-node" @click="handleNodeClick(dept)">
                <div class="node-glow"></div>
                <div class="node-icon dept-icon">
                  <i class="el-icon-office-building"></i>
                  <div class="icon-shine"></div>
                </div>
                <div class="node-content">
                  <div class="node-title">{{ dept.deptName }}</div>
                  <div class="node-type">部门</div>
                  <div class="node-info">
                    <span v-if="dept.leader"><i class="el-icon-user"></i> 负责人: {{ dept.leader }}</span>
                    <span><i class="el-icon-sort"></i> 排序: {{ dept.orderNum }}</span>
                  </div>
                </div>
                <div class="node-badge">
                  <el-tag :type="dept.status === '0' ? 'success' : 'danger'" size="small" effect="dark">
                    {{ getStatusText(dept.status) }}
                  </el-tag>
                </div>
                <div class="node-actions">
                  <el-button
                      link
                      type="primary"
                      icon="Edit"
                      @click.stop="handleUpdate(dept)"
                      v-hasPermi="['system:dept:edit']"
                  ></el-button>
                  <el-button
                      link
                      type="primary"
                      icon="Plus"
                      @click.stop="handleAdd(dept)"
                      v-hasPermi="['system:dept:add']"
                  ></el-button>
                  <el-button
                      link
                      type="primary"
                      icon="CopyDocument"
                      @click.stop="handleAddPeer(dept)"
                      v-hasPermi="['system:dept:add']"
                  ></el-button>
                  <el-button
                      v-if="dept.parentId != 0"
                      link
                      type="primary"
                      icon="Delete"
                      @click.stop="handleDelete(dept)"
                      v-hasPermi="['system:dept:remove']"
                  ></el-button>
                  <el-button
                      v-if="dept.children && dept.children.length > 0"
                      link
                      type="primary"
                      :icon="dept.expanded ? 'ArrowDown' : 'ArrowRight'"
                      @click.stop="toggleDept(dept)"
                      class="expand-btn"
                  ></el-button>
                </div>
              </div>

              <!-- 二级团队 -->
              <div class="team-level level-2" v-if="dept.expanded && dept.children && dept.children.length > 0">
                <div
                    v-for="team in dept.children"
                    :key="team.deptId"
                    class="team-container"
                >
                  <div class="team-node" @click="handleNodeClick(team)">
                    <div class="node-glow"></div>
                    <div class="node-icon team-icon">
                      <i class="el-icon-user"></i>
                      <div class="icon-shine"></div>
                    </div>
                    <div class="node-content">
                      <div class="node-title">{{ team.deptName }}</div>
                      <div class="node-type">团队</div>
                      <div class="node-info">
                        <span v-if="team.leader"><i class="el-icon-user"></i> 负责人: {{ team.leader }}</span>
                        <span><i class="el-icon-sort"></i> 排序: {{ team.orderNum }}</span>
                      </div>
                    </div>
                    <div class="node-badge">
                      <el-tag :type="team.status === '0' ? 'success' : 'danger'" size="small" effect="dark">
                        {{ getStatusText(team.status) }}
                      </el-tag>
                    </div>
                    <div class="node-actions">
                      <el-button
                          link
                          type="primary"
                          icon="Edit"
                          @click.stop="handleUpdate(team)"
                          v-hasPermi="['system:dept:edit']"
                      ></el-button>
                      <el-button
                          link
                          type="primary"
                          icon="Plus"
                          @click.stop="handleAdd(team)"
                          v-hasPermi="['system:dept:add']"
                      ></el-button>
                      <el-button
                          link
                          type="primary"
                          icon="CopyDocument"
                          @click.stop="handleAddPeer(team)"
                          v-hasPermi="['system:dept:add']"
                      ></el-button>
                      <el-button
                          link
                          type="primary"
                          icon="Delete"
                          @click.stop="handleDelete(team)"
                          v-hasPermi="['system:dept:remove']"
                      ></el-button>
                      <el-button
                          v-if="team.children && team.children.length > 0"
                          link
                          type="primary"
                          :icon="team.expanded ? 'ArrowDown' : 'ArrowRight'"
                          @click.stop="toggleDept(team)"
                          class="expand-btn"
                      ></el-button>
                    </div>
                  </div>

                  <!-- 三级小组 -->
                  <div class="group-level level-3" v-if="team.expanded && team.children && team.children.length > 0">
                    <div
                        v-for="group in team.children"
                        :key="group.deptId"
                        class="group-node"
                        @click="handleNodeClick(group)"
                    >
                      <div class="node-glow"></div>
                      <div class="node-icon group-icon">
                        <i class="el-icon-user-solid"></i>
                        <div class="icon-shine"></div>
                      </div>
                      <div class="node-content">
                        <div class="node-title">{{ group.deptName }}</div>
                        <div class="node-type">小组</div>
                        <div class="node-info">
                          <span v-if="group.leader"><i class="el-icon-user"></i> 负责人: {{ group.leader }}</span>
                          <span><i class="el-icon-sort"></i> 排序: {{ group.orderNum }}</span>
                        </div>
                      </div>
                      <div class="node-badge">
                        <el-tag :type="group.status === '0' ? 'success' : 'danger'" size="small" effect="dark">
                          {{ getStatusText(group.status) }}
                        </el-tag>
                      </div>
                      <div class="node-actions">
                        <el-button
                            link
                            type="primary"
                            icon="Edit"
                            @click.stop="handleUpdate(group)"
                            v-hasPermi="['system:dept:edit']"
                        ></el-button>
                        <el-button
                            link
                            type="primary"
                            icon="Plus"
                            @click.stop="handleAdd(group)"
                            v-hasPermi="['system:dept:add']"
                        ></el-button>
                        <el-button
                            link
                            type="primary"
                            icon="CopyDocument"
                            @click.stop="handleAddPeer(group)"
                            v-hasPermi="['system:dept:add']"
                        ></el-button>
                        <el-button
                            link
                            type="primary"
                            icon="Delete"
                            @click.stop="handleDelete(group)"
                            v-hasPermi="['system:dept:remove']"
                        ></el-button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div v-else-if="!loading" class="empty-container">
        <el-empty description="暂无部门数据">
          <el-button type="primary" @click="handleAdd">新增部门</el-button>
        </el-empty>
      </div>
    </div>

    <!-- 添加或修改部门对话框 -->
    <el-dialog :title="title" v-model="open" width="600px" append-to-body>
      <el-form ref="deptRef" :model="form" :rules="rules" label-width="80px">
        <el-row>
          <el-col :span="24" v-if="form.parentId !== 0">
            <el-form-item label="上级部门" prop="parentId">
              <el-tree-select
                  v-model="form.parentId"
                  :data="deptOptions"
                  :props="{ value: 'deptId', label: 'deptName', children: 'children' }"
                  value-key="deptId"
                  placeholder="选择上级部门"
                  check-strictly
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="部门名称" prop="deptName">
              <el-input v-model="form.deptName" placeholder="请输入部门名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="显示排序" prop="orderNum">
              <el-input-number v-model="form.orderNum" controls-position="right" :min="0" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="负责人" prop="leader">
              <el-input v-model="form.leader" placeholder="请输入负责人" maxlength="20" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系电话" prop="phone">
              <el-input v-model="form.phone" placeholder="请输入联系电话" maxlength="11" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="form.email" placeholder="请输入邮箱" maxlength="50" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="部门状态">
              <el-radio-group v-model="form.status">
                <el-radio
                    v-for="dict in sys_normal_disable"
                    :key="dict.value"
                    :value="dict.value"
                >{{ dict.label }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="Dept">
import { listDept, getDept, delDept, addDept, updateDept, listDeptExcludeChild } from "@/api/system/dept"
import { ref, reactive, getCurrentInstance, nextTick, toRefs, computed } from 'vue'

const { proxy } = getCurrentInstance()
const { sys_normal_disable } = proxy.useDict("sys_normal_disable")

const deptList = ref([])
const open = ref(false)
const loading = ref(true)
const showSearch = ref(true)
const title = ref("")
const deptOptions = ref([])
const isExpandAll = ref(true)
const refreshTable = ref(true)

const data = reactive({
  form: {},
  queryParams: {
    deptName: undefined,
    status: undefined
  },
  rules: {
    parentId: [{ required: true, message: "上级部门不能为空", trigger: "blur" }],
    deptName: [{ required: true, message: "部门名称不能为空", trigger: "blur" }],
    orderNum: [{ required: true, message: "显示排序不能为空", trigger: "blur" }],
    email: [{ type: "email", message: "请输入正确的邮箱地址", trigger: ["blur", "change"] }],
    phone: [{ pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur" }]
  },
})

const { queryParams, form, rules } = toRefs(data)

// 计算属性
const rootDept = computed(() => {
  const root = deptList.value.find(dept => dept.parentId === 0) || deptList.value[0]
  if (root && !root.hasOwnProperty('expanded')) {
    root.expanded = isExpandAll.value
  }
  return root
})

/** 查询部门列表 */
function getList() {
  loading.value = true
  listDept(queryParams.value).then(response => {
    deptList.value = proxy.handleTree(response.data, "deptId")

    // 为所有部门添加展开状态
    const addExpandState = (depts, expanded) => {
      depts.forEach(dept => {
        dept.expanded = expanded
        if (dept.children && dept.children.length > 0) {
          addExpandState(dept.children, expanded)
        }
      })
    }

    addExpandState(deptList.value, isExpandAll.value)

    loading.value = false
  }).catch(error => {
    console.error('获取部门数据失败:', error)
    loading.value = false
  })
}

/** 获取状态文本 */
function getStatusText(status) {
  const dict = sys_normal_disable.value.find(item => item.value === status)
  return dict ? dict.label : '未知'
}

/** 节点点击事件 */
function handleNodeClick(data) {
  console.log('点击部门:', data.deptName)
  proxy.$modal.msgSuccess(`点击了: ${data.deptName}`)
}

/** 切换部门展开状态 */
function toggleDept(dept) {
  dept.expanded = !dept.expanded
  console.log('切换部门展开状态:', dept.deptName, dept.expanded)
}

/** 取消按钮 */
function cancel() {
  open.value = false
  reset()
}

/** 表单重置 */
function reset() {
  form.value = {
    deptId: undefined,
    parentId: undefined,
    deptName: undefined,
    orderNum: 0,
    leader: undefined,
    phone: undefined,
    email: undefined,
    status: "0"
  }
  proxy.resetForm("deptRef")
}

/** 搜索按钮操作 */
function handleQuery() {
  getList()
}

/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef")
  handleQuery()
}

/** 新增按钮操作 */
function handleAdd(row) {
  reset()
  listDept().then(response => {
    deptOptions.value = proxy.handleTree(response.data, "deptId")
  })
  if (row != undefined) {
    form.value.parentId = row.deptId
  }
  open.value = true
  title.value = "添加下级组织"
}

/** 添加同级组织 */
function handleAddPeer(row) {
  reset()
  listDept().then(response => {
    deptOptions.value = proxy.handleTree(response.data, "deptId")
  })

  if (row) {
    // 如果有传入部门，则设置与传入部门相同的父级
    form.value.parentId = row.parentId
    // 获取当前部门的父级部门信息，用于显示
    const parentDept = findDeptById(deptList.value, row.parentId)
    if (parentDept) {
      title.value = `在【${parentDept.deptName}】下添加同级组织`
    } else {
      title.value = "添加同级组织"
    }
  } else {
    // 如果没有传入部门，则添加顶级组织（与公司同级）
    form.value.parentId = 0
    title.value = "添加顶级组织"
  }

  open.value = true
}

/** 根据ID查找部门 */
function findDeptById(depts, deptId) {
  for (const dept of depts) {
    if (dept.deptId === deptId) {
      return dept
    }
    if (dept.children && dept.children.length > 0) {
      const found = findDeptById(dept.children, deptId)
      if (found) return found
    }
  }
  return null
}

/** 展开/折叠操作 */
function toggleExpandAll() {
  isExpandAll.value = !isExpandAll.value

  // 递归设置所有节点的展开状态
  const setNodeExpand = (depts, expanded) => {
    depts.forEach(dept => {
      dept.expanded = expanded
      if (dept.children && dept.children.length > 0) {
        setNodeExpand(dept.children, expanded)
      }
    })
  }

  setNodeExpand(deptList.value, isExpandAll.value)
}

/** 修改按钮操作 */
function handleUpdate(row) {
  reset()
  listDeptExcludeChild(row.deptId).then(response => {
    deptOptions.value = proxy.handleTree(response.data, "deptId")
  })
  getDept(row.deptId).then(response => {
    form.value = response.data
    open.value = true
    title.value = "修改组织信息"
  })
}

/** 提交按钮 */
function submitForm() {
  proxy.$refs["deptRef"].validate(valid => {
    if (valid) {
      if (form.value.deptId != undefined) {
        updateDept(form.value).then(response => {
          proxy.$modal.msgSuccess("修改成功")
          open.value = false
          getList()
        })
      } else {
        addDept(form.value).then(response => {
          proxy.$modal.msgSuccess("新增成功")
          open.value = false
          getList()
        })
      }
    }
  })
}

/** 删除按钮操作 */
function handleDelete(row) {
  proxy.$modal.confirm('是否确认删除名称为"' + row.deptName + '"的数据项?').then(function() {
    return delDept(row.deptId)
  }).then(() => {
    getList()
    proxy.$modal.msgSuccess("删除成功")
  }).catch(() => {})
}

getList()
</script>

<style scoped>
.org-chart-vibrant {
  background: #121212;
  padding: 40px 20px;
  min-height: 600px;
  position: relative;
  overflow: hidden;
}

/* 背景装饰 */
.org-chart-vibrant::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
      radial-gradient(circle at 10% 20%, rgba(131,56,236,0.15) 0%, transparent 40%),
      radial-gradient(circle at 90% 80%, rgba(56,189,248,0.15) 0%, transparent 40%),
      radial-gradient(circle at 50% 50%, rgba(16,185,129,0.1) 0%, transparent 30%);
  pointer-events: none;
}

/* 网格装饰 */
.org-chart-vibrant::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: 40px 40px;
  background-image:
      linear-gradient(to right, rgba(255,255,255,0.05) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(255,255,255,0.05) 1px, transparent 1px);
  pointer-events: none;
}

.org-container {
  max-width: 100%;
  margin: 0 auto;
  position: relative;
  z-index: 10;
}

/* 公司节点样式 */
.company-level {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 60px;
}

.company-node {
  background: linear-gradient(135deg, #8b5cf6, #ec4899);
  color: white;
  border-radius: 12px;
  padding: 30px 40px;
  box-shadow: 0 15px 35px rgba(139, 92, 246, 0.4),
  0 8px 15px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 25px;
  min-width: 320px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.company-node:hover {
  transform: translateY(-10px) scale(1.03);
  box-shadow: 0 20px 40px rgba(139, 92, 246, 0.6),
  0 12px 20px rgba(0, 0, 0, 0.3);
}

/* 发光效果 */
.node-glow {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 70%);
  transform: rotate(30deg);
  animation: glow-pulse 4s infinite;
}

@keyframes glow-pulse {
  0%, 100% { transform: rotate(30deg) scale(0.8); opacity: 0.3; }
  50% { transform: rotate(30deg) scale(1); opacity: 0.5; }
}

.company-icon {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  color: white;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  position: relative;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2),
  inset 0 1px 0 rgba(255, 255, 255, 0.3);
  z-index: 2;
}

/* 一级部门样式 */
.dept-level.level-1 {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 30px;
  margin-bottom: 60px;
  position: relative;
}

/* 连接线 */
.dept-level.level-1::before {
  content: '';
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 3px;
  background: linear-gradient(90deg, transparent, #8b5cf6, transparent);
  border-radius: 3px;
}

.dept-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.dept-node {
  background: linear-gradient(135deg, #3b82f6, #1e40af);
  color: white;
  border-radius: 10px;
  padding: 22px 28px;
  box-shadow: 0 10px 25px rgba(59, 130, 246, 0.3),
  0 5px 10px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  min-width: 240px;
  position: relative;
  overflow: hidden;
}

.dept-node:hover {
  transform: translateY(-8px) scale(1.03);
  box-shadow: 0 15px 30px rgba(59, 130, 246, 0.5),
  0 8px 15px rgba(0, 0, 0, 0.25);
}

.dept-icon {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  color: white;
  width: 65px;
  height: 65px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  position: relative;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
  z-index: 2;
}

/* 二级团队样式 */
.team-level.level-2 {
  display: flex;
  flex-wrap: wrap;
  gap: 25px;
  justify-content: center;
  width: 100%;
  max-width: 1000px;
  margin-top: 30px;
  position: relative;
}

.team-level.level-2::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #3b82f6, transparent);
  border-radius: 2px;
}

.team-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  margin-top: 25px;
}

.team-node {
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
  border-radius: 10px;
  padding: 20px 25px;
  box-shadow: 0 8px 20px rgba(16, 185, 129, 0.3),
  0 4px 8px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  min-width: 200px;
  position: relative;
  overflow: hidden;
}

.team-node:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 12px 25px rgba(16, 185, 129, 0.5),
  0 6px 12px rgba(0, 0, 0, 0.25);
}

.team-icon {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  color: white;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  position: relative;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  z-index: 2;
}

/* 三级小组样式 */
.group-level.level-3 {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  width: 100%;
  max-width: 900px;
  margin-top: 25px;
  position: relative;
}

.group-level.level-3::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #10b981, transparent);
  border-radius: 2px;
}

.group-node {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: white;
  border-radius: 10px;
  padding: 18px 22px;
  box-shadow: 0 6px 18px rgba(245, 158, 11, 0.3),
  0 3px 6px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-width: 180px;
  position: relative;
  overflow: hidden;
}

.group-node:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 10px 22px rgba(245, 158, 11, 0.5),
  0 5px 10px rgba(0, 0, 0, 0.25);
}

.group-icon {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  color: white;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  position: relative;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
  z-index: 2;
}

/* 通用节点样式 */
.node-content {
  text-align: center;
  flex: 1;
  z-index: 2;
}

.node-title {
  font-weight: 700;
  font-size: 18px;
  color: inherit;
  margin-bottom: 8px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.node-type {
  font-size: 13px;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  color: inherit;
  padding: 5px 14px;
  border-radius: 15px;
  display: inline-block;
  margin-bottom: 10px;
  font-weight: 600;
}

.node-info {
  font-size: 12px;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 4px;
  opacity: 0.9;
}

.node-info span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.node-badge {
  position: absolute;
  top: 15px;
  right: 15px;
  z-index: 3;
  background: rgba(0, 0, 0, 0.3);
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 11px;
}

.node-actions {
  display: flex;
  gap: 8px;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.3s ease;
  z-index: 3;
  margin-top: 10px;
}

.company-node:hover .node-actions,
.dept-node:hover .node-actions,
.team-node:hover .node-actions,
.group-node:hover .node-actions {
  opacity: 1;
  transform: translateY(0);
}

/* 展开按钮样式 */
.expand-btn {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: white;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.expand-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.1);
}

.expand-btn i {
  font-size: 14px;
}

.empty-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 400px;
  color: rgba(255, 255, 255, 0.5);
}

/* 粒子动画效果 */
.particle {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  pointer-events: none;
  animation: float 15s infinite ease-in-out;
}

@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-50px) rotate(180deg); }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .dept-level.level-1,
  .team-level.level-2,
  .group-level.level-3 {
    flex-direction: column;
    align-items: center;
  }

  .dept-level.level-1::before,
  .team-level.level-2::before,
  .group-level.level-3::before {
    width: 3px;
    height: 30px;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
  }

  .company-node,
  .dept-node,
  .team-node,
  .group-node {
    width: 100%;
    max-width: 300px;
  }

  .org-chart-vibrant {
    padding: 30px 15px;
  }
}
</style>